import { VC, Component } from '@/VC-vue'
import './search.styl'
import { getTaskList, searchTask } from '@/services/control'
import { parseTime } from '../../utils/common'
import { Toast } from 'mand-mobile'

const TOKEN = 16
@Component({})
export default class Search extends VC {
    public $refs!: {
        scrollView: any
    }
    itemList: any[] = []
    isFinished: boolean = false
    pager: any = {
        startPage: 1,
        pageSize: 5
    }
    showList: boolean = false
    total: number = 0
    searchInfo: any = {}
    menuData: any = [
        {
            text: '对象层级',
            index: 0,
            options: [
                {
                    text: '请选择',
                    value: -1
                },
                {
                    value: 1,
                    text: '病区'
                },
                {
                    value: 2,
                    text: '科室'
                },
                {
                    value: 3,
                    text: '医生'
                },
                {
                    value: 4,
                    text: '患者'
                },
                {
                    value: 5,
                    text: '全院'
                }
            ]
        },
        {
            text: '任务状态',
            index: 1,
            options: [
                {
                    text: '请选择',
                    value: -1
                },
                {
                    text: '未处理',
                    value: 'U'
                },
                {
                    text: '处理中',
                    value: 'P'
                },
                {
                    text: '已处理',
                    value: 'F'
                },
                {
                    text: '处理异常',
                    value: 'E'
                }
            ]
        }
    ]
    renderList(res: any, noMargin?: boolean) {
        return (
            <div class="item-card" style={noMargin ? 'margin-bottom:0' : ''}>
                <div class="header-slot is-flex" slot="header">
                    <p class="desc">质控对象：{res.targetName}</p>

                    <div
                        class={
                            res.taskStatus == 'F'
                                ? 'header_tag active'
                                : 'header_tag'
                        }
                    >
                        {res.taskStatus == 'U' && '未处理'}
                        {res.taskStatus == 'P' && '处理中'}
                        {res.taskStatus == 'F' && '已处理'}
                        {res.taskStatus == 'E' && '处理异常'}
                    </div>
                </div>
                <md-detail-item title="质控项目">
                    {res.ruleNames}
                </md-detail-item>
                <md-detail-item title="质控对象数量">
                    {res.targetCount || 0}
                </md-detail-item>
                <md-detail-item
                    title="异常数量"
                    content={`${res.outlierCount || 0}个`}
                />
                <md-detail-item title="创建时间">
                    {res.createTime && parseTime(res.createTime)}
                </md-detail-item>
                <md-detail-item title="处理时间">
                    {res.finishTime && parseTime(res.finishTime)}
                </md-detail-item>
                <div class="card_action is-flex">
                    <a
                        href="javascript:;"
                        onclick={this.navigateTo.bind(
                            this,
                            '/detail',
                            res.taskId.toString()
                        )}
                    >
                        查看详情
                    </a>
                </div>
            </div>
        )
    }

    created() {
        Toast.loading('加载中...')
    }

    mounted() {
        this._getData()
    }

    _doSearch(pager?: any) {
        pager && (this.searchInfo = Object.assign(this.searchInfo, pager))
        return new Promise((resolve, reject) => {
            searchTask(this.searchInfo)
                .then((res: any) => {
                    this.itemList = res.data.retData || []
                    this.total = res.data.totalNum
                    this.showList = true
                    this.$refs.scrollView.reflowScroller()
                    Toast.hide()
                    resolve(true)
                })
                .catch(err => {
                    reject(err)
                })
        })
    }

    _menuChange(e: any, listItem: any) {
        const params = this.searchInfo
        this.pager.pageSize = 5
        const pager = Object.assign(this.pager, { statusOperatorId: TOKEN })
        if (e.index == 0) {
            listItem.value != -1
                ? (params.targetLevel = listItem.value)
                : delete params.targetLevel
        } else {
            listItem.value != -1
                ? (params.taskStatus = listItem.value)
                : delete params.taskStatus
        }
        this.searchInfo = Object.assign(params, pager)
        console.log(this.searchInfo)
        Toast.loading('加载中...')
        this._doSearch()
    }

    renderMenu() {
        return (
            <md-drop-menu
                ref="dropMenu"
                data={this.menuData}
                onchange={this._menuChange}
            />
        )
    }

    _getData() {
        const params = Object.assign({ statusOperatorId: TOKEN }, this.pager)
        return new Promise((resolve, reject) => {
            getTaskList(params)
                .then((res: any) => {
                    this.itemList = res.data.retData
                    this.total = res.data.totalNum
                    this.showList = true
                    this.$refs.scrollView.reflowScroller()
                    Toast.hide()
                    resolve(true)
                })
                .catch(err => {
                    reject(err)
                })
        })
    }

    navigateTo(path: string, taskId: string) {
        this.$router.push({
            path,
            query: {
                taskId
            }
        })
    }

    async _onEndReached() {
        if (this.isFinished) {
            return
        }
        // async data
        if (this.pager.pageSize >= this.total) {
            this.isFinished = true
            this.$refs.scrollView.finishLoadMore()
        } else {
            this.pager.pageSize += 5
            if (this.searchInfo.targetLevel) {
                const result = await this._doSearch(this.pager)
                result && this.$refs.scrollView.finishLoadMore()
            } else {
                const result = await this._getData()
                result && this.$refs.scrollView.finishLoadMore()
            }
        }
    }

    renderIndex() {
        return (
            <md-scroll-view
                ref="scrollView"
                scrolling-x={false}
                class="search-container"
                onendReached={this._onEndReached}
            >
                {this.showList && (
                    <div class="list-main">
                        {this.itemList.map((res, index) => {
                            if (index == this.itemList.length - 1) {
                                return this.renderList(res, true)
                            }
                            return this.renderList(res)
                        })}
                        <md-scroll-view-more
                            slot="more"
                            is-finished={this.isFinished}
                        />
                    </div>
                )}
            </md-scroll-view>
        )
    }

    render() {
        return (
            <div class="search-full">
                {this.renderMenu()}
                {this.renderIndex()}
            </div>
        )
    }
}
